<template>
    <div>
        <!-- 添加 -->
        <el-button type="primary" @click="willAdd">添加</el-button>
        <!-- 列表 -->
        <list-vue :list="list" @willEdit="willEdit" @init="init"></list-vue>
        <!-- 弹窗 -->
        <form-vue :info="info" @init="init" :list="list" ref="form"></form-vue>
        <!-- 分页器 -->
        <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="size"
            @current-change="changePage"
        ></el-pagination>
    </div>
</template>
<script>
import listVue from "./components/list.vue";
import formVue from "./components/form.vue";
import { toggle } from "../../mixins/mixins"
import { mapGetters, mapActions } from "vuex";
import { requserlist, requsercount } from "../../http/api";
export default {
    components: {
        listVue,
        formVue,
    },
    props: [],
    mixins: [toggle],
    data() {
        return {
            //初始化列表
            list: [],
            //当前页码
            page: 1,
            //一页的数量
            size: 2,
            //总条目数
            total: 0
        }
    },
    computed: {
        ...mapGetters({}),
    },
    mounted() {
        this.init()
    },
    methods: {
        ...mapActions({}),
        //渲染页面
        init() {
            this.reqList()
            this.reqTotal()
        },
        //请求列表
        reqList() {
            requserlist({ page: this.page, size: this.size }).then(res => {
                if (res.data.code == 200) {
                    var arr = res.data.list ? res.data.list : []
                    if (arr.length == 0 && this.page !== 1) {
                        this.page--;
                        this.reqList();
                        return
                    }
                    this.list = arr
                }
            })
        },
        //请求条数
        reqTotal() {
            requsercount().then(res => {
                if (res.data.code == 200) {
                    this.total = res.data.list[0].total
                }
            })
        },
        //分页
        changePage(id) {
            this.page = id
            this.init()
        }

    },
};
</script>
<style scoped lang="less">
@import "../../less/index.less";
</style>